<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 画图练习</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
    let ctx = app.getContext("2d");
    // 1. 创建图片对象
    let p3 = new Image();
    p3.src = "../day1/src/play.jpg";

    p3.onload = function () {
        // 1. 平移原点
        ctx.translate(250, 200);
        // 2. 创建要旋转的角度
        let deg = 15 * Math.PI / 180;
        // 3.创建定时器
        let timer = setInterval(function () {
            // 4. 清除画布
            ctx.clearRect(-250, -200, 500, 500);
            // 5. 旋转角度
            ctx.rotate(deg);
            // 6. 绘图
            ctx.drawImage(p3, -200, -100);
        }, 500);
    };
</script>
</body>
</html>